<template>
	<div class="column-management">

		<!-- 表格区域 -->
		<div class="table-area">
			<el-table :data="tableData" border stripe style="width: 100%" v-loading="loading">
				<el-table-column prop="columnId" label="ID" width="80" align="center" />
				<el-table-column prop="name" label="栏目名称" width="150" align="center" />
				<el-table-column prop="columnSort" label="排序" width="200" align="center">
					<template #default="{ row }">
						<el-input-number v-model="row.columnSort" :min="0" :max="999" @change="handleSortChange(row)" />
					</template>
				</el-table-column>
				<el-table-column prop="campusId" label="校区ID" width="100" align="center" />
				<el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
				<el-table-column label="状态" width="100" align="center">
					<template #default="{ row }">
						<el-switch v-model="row.isVisible" :active-value="1" :inactive-value="0" active-color="#13ce66"
							inactive-color="#ff4949" @change="changeStatus(row)" />
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 编辑对话框 -->
		<el-dialog v-model="editDialogVisible" title="编辑栏目" width="500px">
			<el-form :model="editForm" label-width="100px">
				<el-form-item label="栏目ID">
					<el-input v-model="editForm.columnId" disabled />
				</el-form-item>
				<el-form-item label="栏目名称">
					<el-input v-model="editForm.name" disabled />
				</el-form-item>
				<el-form-item label="排序">
					<el-input-number v-model="editForm.columnSort" :min="0" :max="999" />
				</el-form-item>
				<el-form-item label="显示状态">
					<el-switch v-model="editForm.isVisible" :active-value="1" :inactive-value="0" />
				</el-form-item>
				<el-form-item label="校区ID">
					<el-input v-model="editForm.campusId" disabled />
				</el-form-item>
				<el-form-item label="更新时间">
					<el-input v-model="editForm.updateTime" disabled />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="editDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitEditForm">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		getColumnList,
		updateColumn
	} from '@/api/column'

	// 数据定义
	const tableData = ref([])
	const loading = ref(false)
	const editDialogVisible = ref(false)

	// 编辑表单
	const editForm = reactive({
		columnId: null,
		name: '',
		columnSort: 0,
		isVisible: 1,
		campusId: null,
		updateTime: ''
	})

	// 初始化加载数据
	onMounted(() => {
		fetchColumnList()
	})

	// 获取栏目列表
	const fetchColumnList = async () => {
		try {
			loading.value = true
			const res = await getColumnList()
			if (res.code === 200) {
				tableData.value = res.data.list.sort((a, b) => a.columnSort - b.columnSort)
			} else {
				ElMessage.error(res.message || '获取栏目列表失败')
			}
		} catch (error) {
			console.error('获取栏目列表失败:', error)
			ElMessage.error('获取栏目列表失败')
		} finally {
			loading.value = false
		}
	}


	// 排序变化
	const handleSortChange = async (row) => {
		try {
			const params = {
				columnId: row.columnId,
				columnSort: row.columnSort
			}
			const res = await updateColumn(params)
			if (res.code === 200) {
				ElMessage.success('排序更新成功')
				fetchColumnList()
			} else {
				ElMessage.error(res.message || '排序更新失败')
				fetchColumnList()
			}
		} catch (error) {
			console.error('排序更新失败:', error)
			ElMessage.error('排序更新失败')
			fetchColumnList()
		}
	}

	// 修改状态
	const changeStatus = async (row) => {
		try {
			const params = {
				columnId: row.columnId,
				isVisible: row.isVisible
			}
			const res = await updateColumn(params)
			if (res.code === 200) {
				ElMessage.success('状态更新成功')
				fetchColumnList()
			} else {
				ElMessage.error(res.message || '状态更新失败')
				// 恢复原状态
				row.isVisible = row.isVisible === 1 ? 0 : 1
				fetchColumnList()
			}
		} catch (error) {
			console.error('状态更新失败:', error)
			ElMessage.error('状态更新失败')
			// 恢复原状态
			row.isVisible = row.isVisible === 1 ? 0 : 1
			fetchColumnList()
		}
	}

	// 显示编辑对话框
	const showEditDialog = (row) => {
		Object.assign(editForm, {
			columnId: row.columnId,
			name: row.name,
			columnSort: row.columnSort,
			isVisible: row.isVisible,
			campusId: row.campusId,
			updateTime: row.updateTime
		})
		editDialogVisible.value = true
	}

	// 提交编辑表单
	const submitEditForm = async () => {
		try {
			const params = {
				columnId: editForm.columnId,
				columnSort: editForm.columnSort,
				isVisible: editForm.isVisible
			}
			const res = await updateColumn(params)
			if (res.code === 200) {
				ElMessage.success('更新成功')
				editDialogVisible.value = false
				fetchColumnList()
			} else {
				ElMessage.error(res.message || '更新失败')
				fetchColumnList()
			}
		} catch (error) {
			console.error('更新失败:', error)
			ElMessage.error('更新失败')
			fetchColumnList()
		}
	}
</script>

<style scoped>
	.column-management {
		padding: 20px;
		background-color: #fff;
	}

	.search-area {
		margin-bottom: 20px;
	}

	.table-area {
		margin-bottom: 20px;
	}
</style>